/*
 * @Author: 高瑞寒 15932717091@163.com
 * @Date: 2022-05-06 15:06:41
 * @LastEditTime: 2022-05-06 15:29:14
 * @LastEditors: 高瑞寒 15932717091@163.com
 * @Description: 
 */
import React, { Component } from 'react'

import './index.css'

const MyContext = React.createContext()
export default class A extends Component {
  state = {
    username: '小蜗牛',
    age: 12
  }
  render() {
    const { username, age } = this.state
    return (
      <div className='a'>
        <h1>姓名:{username}年龄:{age}</h1>
        <MyContext.Provider value={{ username, age }}>
          <B></B>
        </MyContext.Provider>
      </div>
    )
  }
}
class B extends Component {
  render() {

    return (
      <div className='b'>
        <h2>balabala</h2>
        <C></C>
      </div>
    )
  }
}
// class C extends Component {
//   static contextType = MyContext

//   render() {
//     return (
//       <div className='c'>
//         <h3>姓名:{this.context.username},年龄:{this.context.age}</h3>
//       </div>
//     )
//   }
// }
function C() {
  return (
    <div className='c'>
      <MyContext.Consumer>
        {value => <h3>姓名:{value.username}</h3>}
      </MyContext.Consumer>
    </div>
  )


}